import React, { Component } from 'react';
import {CreateTaskContentStyled } from './CreateTaskContentStyled'

import Navigation from 'components/Navigation/Navigation'
import back from 'images/nav/whiteback@3x.png'
import Button from 'components/UIButton/UIButton'

import { Toast } from 'antd-mobile'
import { taskBody } from 'pages/hall/model/taskSubmit.js'

class CreateTaskContent extends Component {
  state = {
    taskname: '',
    taskinfo: '',
    tasksecrecy: '',
    address: '',
    time : '',
    bossname: '',
    phone: '',
    money: '5'
  }
  render() {
    return (
      <> 
        <Navigation
        title = "任务信息填写"
        leftMargin = '0 0 0 .15rem'
        leftWidth = '25%'
        leftHeight = '.44rem'
        leftImg = {back}
        leftImgWidth = '.2rem'
        clickLeft = {()=>this.onClickLeft("left")}
        ></Navigation>
        <CreateTaskContentStyled>
          <p className="toptip">任务名称（ 公开信息 所有人可见 ）</p>
          <input className="inputwrap taskname" type="text" placeholder="任务名称：" 
          defaultValue = {this.state.taskname} 
           />  
         
          <p className="toptip">任务描述（ 公开信息 所有人可见 ）</p>
          <textarea className="inputwrap taskinfo" name="" id="" cols="30" rows="10" placeholder='描述任务内容:' defaultValue = {this.state.taskinfo} ></textarea>
            
          <p className="toptip">保密信息（ 仅接单员可见 ）</p>
          <textarea className="inputwrap tasksecrecy" name="" id="" cols="30" rows="10" placeholder='如：快递取货码，手机号等信息填写此处' defaultValue = {this.state.tasksecrecy} ></textarea>

          <p className="toptip firstOne"></p>
          <div className="inputwrap">
            <span>送达地址：</span>
            <input className='address' type="text" defaultValue = {this.state.address} />
          </div>
          <div className="inputwrap">
            <span>送达时间：</span>
            <input placeholder='请输入1990/10/01格式日期' className='time' type="text" defaultValue = {this.state.time}/>
          </div>

          <p className="toptip firstOne">联系方式（ 仅接单员可见 ）</p>
          <div className="inputwrap">
            <span>联系人：</span>
            <input className='bossname' type="text" defaultValue = {this.state.bossname}/>
          </div>
          <div className="inputwrap">
            <span>手机号：</span>
            <input className='phone' type="number" defaultValue = {this.state.phone}/>
          </div>
          <div className="inputwrap price">
            <span>支付报酬：</span>
            <Button
            width='.2rem'
            height='.2rem'
            borderRadius='.02rem'
            border= '1px solid #646464'
            titleColor='#646464'
            titleSize='.18rem'
            clickButton={()=>this.clickSub()}
            title='-'
            margin='0 0 0 .4rem'
            ></Button>
            <input className='money' 
            type="number" 
            name="points"
            min="0" 
            max="100"
            value = {this.state.money}
            onChange={this.changeInputValue} />
            <Button
            width='.2rem'
            height='.2rem'
            borderRadius='.02rem'
            border= '1px solid #646464'
            titleColor='#646464'
            titleSize='.18rem'
            clickButton={()=>this.clickAdd()}
            title='+'
            margin='0 .15rem 0 0'
            ></Button>
            元
          </div>

          <p className='pright'>若任务取消资金将原路返回</p>
          <p className='pleft'>温馨提示：请抓紧时间确保商品按时送达</p>

          <Button
          width='1.4rem'
          height='.4rem'
          borderRadius='.2rem'
          title='填写完成'
          backgroundColor = '#FDB234'
          titleColor = "#fff"
          titleSize = '.15rem'
          clickButton={()=>this.clickcomfirm()}          
          ></Button>


        </CreateTaskContentStyled>
      </>
    );
  }

  // 点击返回
  onClickLeft(tag){
    this.props.history.go(-1)
  }

  // 点击+
  clickAdd(){
    this.setState({
      money: Number( this.state.money ) + 1
    })
  }
  // 点击-
  clickSub(){
    if( Number( this.state.money ) <= 0)return;
    this.setState({
      money: Number( this.state.money ) -1
    })
  }

  // 任务金额改变
  changeInputValue=(e)=>{
    this.setState({
      money: e.target.value
    })
    
  }
// 点击保存
  clickcomfirm(){
    // console.log(
      // 任务名 tname
      taskBody.tname = document.getElementsByClassName('taskname')[0].value
      // 任务描述 tcontent
      taskBody.tcontent = document.getElementsByClassName('taskinfo')[0].value
      // 地址
      taskBody.staplace = document.getElementsByClassName('address')[0].value
      // 时间
      taskBody.requesttime = document.getElementsByClassName('time')[0].value
      taskBody.endtime = document.getElementsByClassName('time')[0].value

      // 保密信息
      taskBody.secontet = taskBody.destination= document.getElementsByClassName('tasksecrecy')[0].value
      // 联系人
      taskBody.linkman= document.getElementsByClassName('bossname')[0].value
      // 手机号
      taskBody.linkphone= document.getElementsByClassName('phone')[0].value
      taskBody.price = this.state.money
    // )
     

    //  "fff"
    // = 1
    // = '2019-10-10'
  
    // '1a'
    // ='yy'
    // 'aaaa'
    // 15616643714'
    // // taskBody.tcontent = 
    // depid:1,
    //   tyid : 1,
    //   tcontent: "fff",
    //   destination: 1,
    //   requesttime: '2019-10-10',
    // taskBody.tname = document.getElementsByClassName('taskname')[0].value
    //   staplace:'1a',
    //   secontet:'yy',
    //   linkman: 'aaaa',
    //   linkphone: '15616643714',

    this.props.history.go(-1)
    
  }
}

export default CreateTaskContent;